<!--规则设置-->
<template>
  <div>
    <a-modal
      :title="$t('Rule-setting')"
      :visible="visible"
      :width="$store.state.language=='zh'?'50%':'60%'"
      @cancel="handleCancel"
      :cancelText="$t('Cancel')" :okText="$t('Sure')" 
      :maskClosable='false'
      v-dragModal
    >
      <div class="tips">
        <img src="../../../../../../static/images/disk_check/16_f_ic_tips.png" alt="tip_img"/>
        <span v-if="$store.state.language=='zh'">系统日志若不定期清除会占用大量系统资源，PentaStor系统默认已经对系统日志规则做了优化，建议您不要随意更改。</span>
        <span v-else>If the system log is not cleared regularly, it will occupy a lot of system resources. By default, the PentaStor system has optimized the system log rules. It is recommended that you do not change them at will.</span>
      </div>
      <a-form :form='form'>
        <!--系统日志存储位置-->
        <a-form-item :label="$t('Sys-log-location')" v-bind="$store.state.language=='zh'?formlayout:formlayout2" has-feedback>
          <a-select v-decorator="['location',{
	                    rules:[{required:true,message:$t('Choose')+ $t('Sys-log-location')}],
	                }]" :placeholder="$t('Choose')+ $t('Sys-log-location')"
                  @change="changeSystemLogLocation">
            <a-select-option v-for="(item,index) in sysLogLocations" :value='item.value' :key="index">{{item.title}}</a-select-option>
	        </a-select>
        </a-form-item>
        <!--选择节点-->
        <a-form-item :label="$t('Select-node')" v-bind="$store.state.language=='zh'?formlayout:formlayout2" has-feedback 
                    v-if="nowSystemLogLocation==1">
          <a-select v-decorator="['node',{
                      rules:[{required:true,message:$t('Choose')+$t('Node')},]
                    }]" :placeholder="$t('Choose')+$t('Node')">
            <a-select-option value='1' >aaa</a-select-option>
          </a-select>
        </a-form-item>
        <!--服务器地址-->
        <a-form-item :label="$t('Server-address')" v-bind="$store.state.language=='zh'?formlayout:formlayout2" has-feedback 
                    v-if="nowSystemLogLocation==2">
          <a-input v-decorator="['address',{
              rules:[{required:true,message:$t('Enter')+$t('Server-address')},
              {pattern:ipReg,message:$t('Enter-ok-ip')}]
          }]" :placeholder="$t('Enter')+$t('Server-address')">
          </a-input>
        </a-form-item>
        <!--scp端口-->
        <a-form-item :label="$t('SCP-port')" v-bind="$store.state.language=='zh'?formlayout:formlayout2" has-feedback 
                    v-if="nowSystemLogLocation==2">
          <a-input v-decorator="['scp_port',{
              rules:[
              {required:true,message:$t('Enter')+$t('SCP-port')},
              {pattern:scpPortReg,message:$t('Enter-ok-scpPort')}
              ]
          }]" :placeholder="$t('Enter')+$t('SCP-port')">
          </a-input>
        </a-form-item>
        <!--导出日志文件包最大限制-->
        <a-form-item :label="$t('Export-log-limit')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-slider :min="0" :max="102400"
                    v-decorator="['log_file_size',{rules:[],initialValue:sliderValue1}]"
                    :marks="marks"
                    :tooltipVisible="false"
                    @change="sliderChange1"
          />
          <!-- tooltipPlacement="bottom" -->
          <div class="log-size-tip">
            <span v-if="$store.state.language=='zh'">注：“0”为不限制</span>
            <span v-else>Note: "0" means unlimited</span>
          </div>
          <div v-show="sliderValue1!=0 && sliderValue1!=102400" id="slider-tip">{{sliderValue1}}M</div>
        </a-form-item>
        <!--系统日志最大可收集时长-->
        <a-form-item :label="$t('Sys-log-time')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-input :disabled="true" :placeholder="$store.state.language=='zh'?'一个月':'A month'"></a-input>
        </a-form-item>
        <!--导出文件最长存储时间-->
        <a-form-item :label="$t('Export-file-store-time')" v-bind="$store.state.language=='zh'?formlayout:formlayout2" has-feedback>
          <a-select v-decorator="['store_time',{
	                  rules:[{required:true,message:$t('Choose')+ $t('Export-file-store-time')}],
                    initialValue:'0'
	                }]" :placeholder="$t('Choose')+ $t('Export-file-store-time')"
          >
            <template v-if="$store.state.language=='zh'">
              <a-select-option v-for="(item,index) in storeTimeArray" :value='item.value' :key="index">{{item.title}}</a-select-option>
            </template>
            <template v-else>
              <a-select-option v-for="(item,index) in storeTimeArray" :value='item.value' :key="index">{{item.title_en}}</a-select-option>
            </template>
	        </a-select>
        </a-form-item>
        <!--禁止收集日志-->
        <a-form-item :label="$t('Disabled-collect-log')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-switch v-model="isDisabledCollectLog" />
          <span v-if="$store.state.language == 'zh'" :class="!isDisabledCollectLog?'disabled-tip':''">当系统已用容量超过 </span>
          <span v-else :class="!isDisabledCollectLog?'disabled-tip':''">When the used capacity of the system exceeds </span>
          <a-input v-decorator="['store_percent',{
	                  rules:[{pattern:/^([1-9]\d{0,1}|100)$/,message:$t('Enter')+ $t('Pos-int-num')}]
	                }]" :placeholder="$t('Enter')+ $t('Pos-int-num')"
                  :disabled="!isDisabledCollectLog"
                  addon-after="%"
                  style="width:40%"
          ></a-input>
          <span v-if="$store.state.language == 'zh'" :class="!isDisabledCollectLog?'disabled-tip':''"> 时，禁止收集系统日志</span>
          <span v-else :class="!isDisabledCollectLog?'disabled-tip':''"> , it is prohibited to collect system logs</span>
        </a-form-item>
        <!--未收集日志占用节点空间最大限制-->
        <a-form-item :label="$t('Uncollected-log-space')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-slider :min="0" :max="20"
                    v-decorator="['node_size',{rules:[],initialValue:sliderValue2}]"
                    :marks="marks2"
                    :tooltipVisible="false"
                    @change="sliderChange2"
          />
          <!-- tooltipPlacement="bottom" -->
          <div class="log-size-tip">
            <span v-if="$store.state.language=='zh'">注：默认值5%</span>
            <span v-else>Note: Default value 5%</span>
          </div>
          <div v-show="sliderValue2!=0 && sliderValue2!=5 && sliderValue2!=20" id="slider-tip2">{{sliderValue2}}%</div>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button class="reset-btn" @click="resetFormValue">
          {{$t('Reset-to-default')}}<!-- 重置为默认值 -->
        </a-button>
        <a-button key="back" @click="handleCancel">
          {{$t('Cancel')}}
        </a-button>
        <a-button key="submit" type="primary" @click="handleOk">
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "SetRule_old",
  props: ['visible'],
  data() {
    return {
      form:this.$form.createForm(this),
      formlayout:{
        labelCol:{span:9},
        wrapperCol:{span:14}
      },
      formlayout2:{
        labelCol:{span:12},
        wrapperCol:{span:11}
      },
      nowSystemLogLocation: '',
      sysLogLocations: [
        { title:this.$t('Occurrence-node'), value:'0' },
        { title:this.$t('System-special-node'), value:'1' },
        { title:this.$t('Special-log-serve'), value:'2' },
      ],
      storeTimeArray: [
        { title:'下载后自动清除（默认）', title_en:'Auto clear after download (default)', value:'0' },
        { title:'1天', title_en:'A day', value:'1' },
        { title:'3天', title_en:'Three days', value:'2' },
        { title:'1周', title_en:'A week', value:'3' },
        { title:'1个月', title_en:'A month', value:'4' },
        { title:'3个月', title_en:'Three months', value:'5' },
      ],
      marks: {
        0: '0',
        102400: '102400M',
      },
      marks2: {
        0: '0',
        5: '5%',
        20: '20%',
      },
      isDisabledCollectLog: false,
      ipReg: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
      scpPortReg: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/,
      sliderValue1: 0,
      sliderValue2: 5,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.sliderTipPositionFun1(this.sliderValue1);
      this.sliderTipPositionFun2(this.sliderValue2);
    })
  },
  methods: {
    //提交规则
    handleOk(e) {
      e.preventDefault();
      this.form.validateFields((err,value)=>{
        // if(!err){
          
        // }
      })
    },

    //改变系统日志存储位置
    changeSystemLogLocation(value) {
      this.nowSystemLogLocation = value;
    },

    //导出日志文件包最大限制 滚动条改变
    sliderChange1(value) {
      this.sliderValue1 = value;
      this.sliderTipPositionFun1(value);
    },
    sliderTipPositionFun1(value) {
      let tipDom = document.getElementById('slider-tip');
      if(value >= 0 && value < 7300) {
        tipDom.style.left = value/102400 * 100 + 2 + '%';
      }else if(value >= 7300 && value < 82648) {
        tipDom.style.left = value/102400 * 100 - 5.5 + '%';
      }else if(value >= 82648 && value < 93848) {
        tipDom.style.left = value/102400 * 100 - 15 + '%';
      }else if(value >= 93848 && value <= 99180) {
        tipDom.style.left = value/102400 * 100 - 20 + '%';
      }else if(value > 99180) {
        tipDom.style.left = value/102400 * 100 - 25 + '%';
      }
    },

    //未收集日志占用节点空间最大限制 滚动条改变
    sliderChange2(value) {
      this.sliderValue2 = value;
      this.sliderTipPositionFun2(value);
    },
    sliderTipPositionFun2(value) {
      let tipDom = document.getElementById('slider-tip2');
      if(value >= 0 && value < 10) {
        tipDom.style.left = value/20 * 100 -1 + '%';
      }else if(value >= 10 && value <= 18) {
        tipDom.style.left = value/20 * 100 -3 + '%';
      }else if(value > 18) {
        tipDom.style.left = value/20 * 100 -8 + '%';
      }
    },

    //重置表单值
    resetFormValue() {
      this.form.resetFields();
      this.nowSystemLogLocation = '';
      this.sliderValue1 = 0;
      this.sliderValue2 = 5;
      this.isDisabledCollectLog = false;
    },

    //关闭规则设置弹窗
    handleCancel() {
      this.$emit('closeDialog', 'set_rule');
    },
  },
}
</script>
<style scoped>
  ::v-deep.ant-modal-body {
    max-height: 550px;
    overflow: auto;
  }
  ::v-deep.ant-modal {
    top: 50px;
  }
  .tips {
    width: 100%;
    height: 100%;
    padding: 14px;
    margin: 5px 0;
    background-color: rgba(7, 133, 253, 0.1);
    border-radius: 4px;
    border: solid 1px var(--themeColor);
  }
  .tips img {
    margin-right: 5px;
    vertical-align: text-bottom;
  }
  .log-size-tip {
    color: #999;
    font-size: 12px;
  }
  .disabled-tip {
    color: #999;
  }
  .reset-btn {
    float: left;
    color: var(--themeColor);
    background-color: #e5f3fe;
    border-color: #e5f3fe;
  }
  #slider-tip,
  #slider-tip2 {
    position: absolute;
    top: 4.5px;
    left: 10px;
    color: var(--themeColor);
  }
</style>